/**
 * @Author:marina
 * @Date: 2025-02-18 10:22:54 
 * @Description: div+css图片标签展开组件
 */

<template>
    <div
        class="pic-label-expansion"
        :style="{
            '--w': `${_width}`,
            '--r': `${_radius}`,
        }"
    >
        <figure
            :class="_pos == 'left' ? 'alt' : ''"
            :style="{ 'font': `bold ${_fontSize}/1.5 monospace` }"
        >
            <img
                :src="_src"
                alt="woman"
            >
            <figcaption>{{ _des }}</figcaption>
        </figure>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
    // 图片地址
    _src: {
        type: String,
        required: true,
    },
    // 图片描述
    _des: {
        type: String,
        required: true,
        default: '描述'
    },
    // 文字描述的位置
    _pos: {
        type: String,
        required: true,
        default: 'left',
    },
    // 图片宽度
    _width: {
        type: String,
        required: true,
        default: '200px',
    },
    // 图片圆角大小
    _radius: {
        type: String,
        required: true,
        default: '0.5em',
    },
    // 文字描述的大小
    _fontSize: {
        type: String,
        required: true,
        default: '40px',
    }
});



</script>

<style scoped lang="less">
.pic-label-expansion {
    margin: 0;
    height: auto;
    // min-height: 100vh;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    gap: 30px;
    // background: linear-gradient(135deg in hsl, #D1F2A5, #F56991);

    @property --_x {
        syntax: "<length>";
        inherits: true;
        initial-value: 0px;
    }

    figure {
        // --w: 200px;  //image width
        // --r: .5em; //radius

        display: grid;
        place-items: end end;
        // font: bold 40px/1.5 monospace;
        transition: --_x .5s;
        cursor: pointer;
        margin: 0;
    }

    figure.alt {
        place-items: end start;
    }

    figure>* {
        grid-area: 1/1;
    }

    figure:hover {
        --_x: calc(var(--w) - 3*var(--r) - .5lh);
    }

    figure img {
        width: var(--w);
        aspect-ratio: 1;
        border-radius: var(--r);
        --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 69%, #0000 72%);
        --_g: conic-gradient(from 90deg at calc(100% - var(--r)) calc(100% - var(--r)), #0000 25%, #000 0);
        --_d: (.5lh + var(--r));
        mask:
            calc(100% - var(--_d) - var(--_x)) 100% var(--_m),
            100% calc(100% - var(--_d)) var(--_m),
            radial-gradient(.5lh at 100% 100%, #0000 99%, #000 calc(100% + 1px)) calc(-1*var(--r) - var(--_x)) calc(-1*var(--r)),
            var(--_g) calc(-1*var(--_d) - var(--_x)) 0,
            var(--_g) 0 calc(-1*var(--_d));
        mask-repeat: no-repeat;
    }

    figure.alt img {
        --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
        mask:
            calc(var(--_d) + var(--_x)) 100% var(--_m),
            0% calc(100% - var(--_d)) var(--_m),
            radial-gradient(.5lh at 0 100%, #0000 99%, #000 calc(100% + 1px)) calc(var(--r) + var(--_x)) calc(-1*var(--r)),
            var(--_g) calc(var(--_d) + var(--_x)) 0,
            var(--_g) 0 calc(-1*var(--_d));
        mask-repeat: no-repeat;
    }

    figure figcaption {
        height: 1lh;
        width: calc(1lh + var(--_x));
        box-sizing: border-box;
        translate: calc(.5lh - var(--r)) calc(.5lh - var(--r));
        overflow: hidden;
        background: #BF4D28;
        color: #fff;
        border-inline: calc(.5lh - .5ch) solid #0000;
        clip-path: inset(5px round 1lh);
        text-align: center;
        letter-spacing: 1px;
    }

    figure.alt figcaption {
        translate: calc(-.5lh + var(--r)) calc(.5lh - var(--r));
    }

}
</style>



